<template>
  <!-- <div class="grid items-center gap-4 mb-4">
    <Label for="webhook-url">
      {{ t("WebHookUrl") }}<span style="color: red"><sup>*</sup></span>
    </Label>
    <Input
      id="webhook-url"
      v-model="pageData.webHookUrl"
      type="url"
      pattern="https?://.+"
      @change="updateValueFn"
    />
  </div> -->
  <FormField
    v-slot="{ componentField, handleBlur, handleChange, errors }"
    name="webHookUrl"
  >
    <FormItem class="mb-4">
      <FormLabel>
        {{ t("WebHookUrl") }}
        <span style="color: red"><sup>*</sup></span>
      </FormLabel>
      <FormControl>
        <Input
          type="url"
          :placeholder="t('WebHookUrl')"
          v-bind="componentField"
          @change="(e: any) => {
            updateUrlFn(e.target.value);
            handleChange(e);
          }"
          @blur="handleBlur"
          :class="errors && errors.length ? '!outline-red-500' : ''"
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  </FormField>
  <FormField
    v-slot="{ componentField, handleBlur, handleChange, errors }"
    name="secretKey"
  >
    <FormItem class="mb-4">
      <FormLabel>
        {{ t("SecretKey") }}
        <span style="color: red"><sup>*</sup></span>
      </FormLabel>
      <FormControl>
        <Input
          :placeholder="t('SecretKey')"
          v-bind="componentField"
          @change="(e: any) => {
            updateKeyFn(e.target.value);
            handleChange(e);
          }"
          @blur="handleBlur"
          :class="errors && errors.length ? '!outline-red-500' : ''"
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  </FormField>
  <!-- <div class="grid items-center gap-4 mb-4">
    <Label for="webhook-key">
      {{ t("SecretKey") }}<span style="color: red"><sup>*</sup></span>
    </Label>
    <Input
      id="webhook-key"
      v-model="pageData.secretKey"
      type="url"
      pattern="https?://.+"
      @change="updateValueFn"
    />
  </div> -->
  <p class="text-xs opacity-85 mt-2">
    {{ t("For safety, must use secret key") }}
  </p>
  <Translation tag="p" keypath="Read more:" class="text-xs opacity-85 mt-2">
    <a href="https://developers.dingtalk.com/document/robots/custom-robot-access" target="_blank" class="break-words underline hover:text-primary">https://developers.dingtalk.com/document/robots/custom-robot-access</a>
    <a href="https://open.dingtalk.com/document/robots/customize-robot-security-settings#title-7fs-kgs-36x" target="_blank" class="break-words underline hover:text-primary">https://open.dingtalk.com/document/robots/customize-robot-security-settings#title-7fs-kgs-36x</a>
  </Translation>
</template>

<script setup lang="ts">
import { Input } from "@/components/ui/input";
// import { Label } from "@/components/ui/label";
import {
  FormControl,
  // FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { ref, onMounted } from "vue";

import { useI18n, Translation } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({ webHookUrl: "", secretKey: "" }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateUrlFn = (url: string) => {
  pageData.value.webHookUrl = url;
  updateValueFn();
};

const updateKeyFn = (key: string) => {
  pageData.value.secretKey = key;
  updateValueFn();
};

const updateValueFn = () => {
  emits("update", {
    webHookUrl: pageData.value.webHookUrl,
    secretKey: pageData.value.secretKey,
  });
};

onMounted(() => {
  updateValueFn();
});
</script>
